<template>
	<div>
        <mj-title type="h2" title="Table 表格"></mj-title>
        <div class="page-desc">用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="mb10 tools">
                    <mj-button type="primary" @click="setting.hover=!setting.hover">鼠标悬停时高亮:{{setting.hover}}</mj-button>
                    <mj-button type="primary" @click="setting.border=!setting.border">是否显示表格纵向边框:{{setting.border}}</mj-button>
                    <mj-button type="primary" @click="setting.stripe=!setting.stripe">是否显示间隔斑马纹:{{setting.stripe}}</mj-button>
                    <mj-button type="primary" @click="setting.showHeader=!setting.showHeader">是否显示表头:{{setting.showHeader}}</mj-button>
                    <mj-button type="primary" @click="updata">更新表格数据</mj-button>
                    <mj-button type="primary" @click="cleardata">模拟表格数据为空</mj-button>
                    <mj-button type="primary" @click="addData">添加一行</mj-button>
                </div>
                <mj-table :data="tableData" :hover="setting.hover" :border="setting.border" :stripe="setting.stripe" v-loading="loading1" :show-header="setting.showHeader">
                    <mj-column type="selection" width="50"></mj-column>
                    <mj-column label="姓名" prop="name"></mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="日期" prop="date"></mj-column>
                    <mj-column label="邮箱" prop="email" width="200"></mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;div class="mb10 tools">
                            &lt;mj-button type="primary" @click="setting.hover=!setting.hover">鼠标悬停时高亮:{setting.hover}&lt;/mj-button>
                            &lt;mj-button type="primary" @click="setting.border=!setting.border">是否显示表格纵向边框:{setting.border}&lt;/mj-button>
                            &lt;mj-button type="primary" @click="setting.stripe=!setting.stripe">是否显示间隔斑马纹:{setting.stripe}&lt;/mj-button>
                            &lt;mj-button type="primary" @click="setting.showHeader=!setting.showHeader">是否显示表头:{setting.showHeader}&lt;/mj-button>
                            &lt;mj-button type="primary" @click="updata">更新表格数据&lt;/mj-button>
                            &lt;mj-button type="primary" @click="cleardata">模拟表格数据为空&lt;/mj-button>
                            &lt;mj-button type="primary" @click="addData">添加一行&lt;/mj-button>
                        &lt;/div>
                        &lt;mj-table :data="tableData" :hover="setting.hover" :border="setting.border" :stripe="setting.stripe" v-loading="loading1" :show-header="setting.showHeader">
                            &lt;mj-column type="selection" width="50">&lt;/mj-column>
                            &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email" width="200">&lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    &lt;script>
                    export default {
                        data() {
                            return {
                                tableData: [
                                    {
                                        name: 'John Brown',
                                        age: 18,
                                        address: 'New York No. 1 Lake Park',
                                        date: '2016-10-03',
                                        email:'ken@gmail.com',
                                        trClass: 'trClass' /* 特殊参数为当前tr添加指定样式 */
                                    },
                                    {
                                        name: 'John Smith',
                                        age: 24,
                                        address: 'London No. 1 Lake Park',
                                        date: '2022-10-01',
                                        email:'Danny@info.com',
                                        disabled:true,//禁用
                                        children:[
                                            {
                                                name:'子节点1',
                                                age: 38,
                                                address: 'children',
                                                date: '2016-10-01',
                                                email:'Gladys@info.com',
                                                trClass:'trClass'
                                            },
                                            {
                                                name:'子节点2',
                                                age: 38,
                                                address: 'children',
                                                date: '2016-10-01',
                                                email:'sarah@gmail.com',
                                                trClass:'trClass'
                                            }
                                        ]
                                    },
                                    {
                                        name: 'Joe Black',
                                        age: 30,
                                        address: 'Sydney No. 1 Lake Park',
                                        date: '2019-12-02',
                                        email:'test@example.com',
                                    },
                                    {
                                        name: 'Ken Smith',
                                        age: 26,
                                        address: 'Ottawa No. 2 Lake Park',
                                        date: '2021-10-04',
                                        email:'Gerald@gmail.com',
                                    },
                                    {
                                        name: 'Gerald K Smith',
                                        age: 58,
                                        address: 'New York No. 1 Lake Park',
                                        date: '2016-05-11',
                                        email:'Patricia@gmail.com',
                                        children:[
                                            {
                                                name:'子节点3',
                                                age: 25,
                                                address: 'children',
                                                date: '2016-10-01',
                                                email:'Gladys@info.com',
                                                trClass:'trClass'
                                            },
                                            {
                                                name:'子节点4',
                                                age: 25,
                                                address: 'children',
                                                date: '2016-10-01',
                                                email:'sarah@gmail.com',
                                                trClass:'trClass'
                                            }
                                        ]
                                    },
                                    {
                                        name: 'Ken Smith',
                                        age: 29,
                                        address: 'London No. 1 Lake Park',
                                        date: '2018-10-01',
                                        email:'Gladys@gmail.com',
                                    },
                                    {
                                        name: 'Alice A Smith',
                                        age: 16,
                                        address: 'Sydney No. 1 Lake Park',
                                        date: '2019-10-02',
                                        email:'ken@gmail.com',
                                    },
                                    {
                                        name: 'Corrine M Johnson',
                                        age: 27,
                                        address: 'Ottawa No. 2 Lake Park',
                                        date: '2021-01-04',
                                        email:'Corrine@gmail.com',
                                    }
                                ],
                                loading1:false,
                                setting:{
                                    hover:true,
                                    border:false,
                                    stripe:false,
                                    showHeader:true,
                                }
                            }
                        }
                    }
                    &lt;/script>         
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="固定表头"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData" height="250">
                    <mj-column label="姓名" prop="name"></mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="日期" prop="date"></mj-column>
                    <mj-column label="邮箱" prop="email"></mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData" height="250">
                            &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="固定头和列"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
               <mj-table :data="tableData4" ellipsis>
                    <mj-column label="姓名" prop="name" width="180" fixed="left">
                        <template slot-scope="{row,index}">
                            <span>{{index==2?'':index}}</span>
                        </template>
                    </mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="地址" prop="address" width="300"></mj-column>
                    <mj-column label="日期" prop="date" width="200"></mj-column>
                    <mj-column label="邮箱" prop="email" width="200" fixed="right"></mj-column>
                </mj-table>
                <ul class="page-list pt5">
                    <li>使用固定列，需td中固定高度，否则浮动列与固定列的高度对不齐。</li>
                    <li>在内容较多时候，建议使用<code>ellipsis</code>参数截断内容</li>
                    <li>扩展与二级展开不能与固定列同时使用</li>
                </ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                       &lt;mj-table :data="tableData" height="250" ellipsis>
                            &lt;mj-column label="姓名" prop="name" width="180" fixed="left">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="地址" prop="address" width="300">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date" width="200">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email" width="200" fixed="right">&lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="添加序号"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData">
                    <mj-column type="index" label="序号" width="60" align="center"></mj-column>
                    <mj-column label="姓名" prop="name"></mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="日期" prop="date"></mj-column>
                    <mj-column label="邮箱" prop="email"></mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData">
                            &lt;mj-column type="index" label="序号" width="60" align="center">&lt;/mj-column>
                            &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="多选"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData" ref="getSelectAll">
                    <mj-column type="selection" width="50"></mj-column>
                    <mj-column label="姓名" prop="name"></mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="日期" prop="date"></mj-column>
                    <mj-column label="邮箱" prop="email"></mj-column>
                </mj-table>
                <div class="mt10">
                    <mj-button @click="toggleSelection(true)" type="primary" hollow>选中所有行</mj-button>
                    <mj-button @click="toggleSelection(false)" type="primary" hollow>取消选择</mj-button>
                    <mj-button @click="toggleRowSelection" type="primary" hollow>切换第二、三行为选中状态</mj-button>
                    <mj-button @click="toggleRowSelection(false)" type="primary" hollow>切换第二、三行为未选中状态</mj-button>
                    <mj-button type="primary" @click="getSelectAll">getSelectAll</mj-button>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData" ref="getSelectAll">
                            &lt;mj-column type="selection" width="50">&lt;/mj-column>
                            &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                        &lt;/mj-table>
                        &lt;div class="mt10">
                            &lt;mj-button @click="toggleSelection(true)" type="primary" hollow>选中所有行&lt;/mj-button>
                            &lt;mj-button @click="toggleSelection(false)" type="primary" hollow>取消选择&lt;/mj-button>
                            &lt;mj-button @click="toggleRowSelection" type="primary" hollow>切换第二、三行为选中状态&lt;/mj-button>
                            &lt;mj-button @click="toggleRowSelection(false)" type="primary" hollow>切换第二、三行为未选中状态&lt;/mj-button>
                            &lt;mj-button type="primary" @click="getSelectAll">getSelectAll&lt;/mj-button>
                        &lt;/div>
                    &lt;/template>
                    &lt;script>
                    export default {
                        data() {
                            return {
                                tableData:....
                            }
                        },
                        methods:{
                            getSelectAll() {
                                this.$alert(JSON.stringify(this.$refs.getSelectAll.getSelectAll()))
                                console.log("getSelectAll");
                                console.log(this.$refs.getSelectAll.getSelectAll());
                            },
                            toggleSelection(boolean) {
                                this.$refs.getSelectAll.toggleSelection(boolean);
                            },
                            toggleRowSelection(bool) {
                                const row = [2,3];
                                row.forEach(row => {
                                    this.$refs.getSelectAll.toggleRowSelection(row, bool);
                                });
                            },
                        }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="排序"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="mb5 flex align-items-center">
                    <mj-button type="primary" @click="clearSort">清空排序</mj-button>
                    <p class="ml10">恢复初始排序由服务端控制，本地清除排序状态</p>
                </div>
                <mj-table :data="tableData" @sort-change="sortChange" ref="tableSort">
                    <mj-column type="index" label="序号" width="60" align="center"></mj-column>
                    <mj-column label="姓名" prop="name" sortable></mj-column>
                    <mj-column label="年龄" prop="age" sortable="custom"></mj-column>
                    <mj-column label="日期" prop="date" sortable="custom"></mj-column>
                    <mj-column label="邮箱" prop="email"></mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;div class="mb5 flex align-items-center">
                            &lt;mj-button type="primary" @click="clearSort">清空排序&lt;/mj-button>
                            &lt;p class="ml10">恢复初始排序由服务端控制，本地清除排序状态&lt;/p>
                        &lt;/div>
                        &lt;mj-table :data="tableData" @sort-change="sortChange" ref="tableSort">
                            &lt;mj-column type="index" label="序号" width="60" align="center">&lt;/mj-column>
                            &lt;mj-column label="姓名" prop="name" sortable>&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age" sortable>&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date" sortable>&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    &lt;script>
                    export default {
                        data() {
                            return {
                                tableData:....
                            }
                        },
                        methods:{
                            clearSort() {
                                this.$refs.tableSort.clearSort()
                            },
                            sortChange(column, prop, order) {
                                console.log('%c排序','color:yellow',column, prop, order)
                            },
                        }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="固定列宽"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData" border>
                    <mj-column label="姓名" prop="name" width="160"></mj-column>
                    <mj-column label="年龄" prop="age" width="100"></mj-column>
                    <mj-column label="日期" prop="date" width="200"></mj-column>
                    <mj-column label="邮箱" prop="email" width="300"></mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData" border>
                            &lt;mj-column label="姓名" prop="name" width="160">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age" width="100">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date" width="200">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email" width="300">&lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="显示loading"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData" v-loading="loading">
                    <mj-column label="姓名" prop="name"></mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="日期" prop="date"></mj-column>
                    <mj-column label="邮箱" prop="email"></mj-column>
                </mj-table>
                <mj-form label-width="100px" class="mt20">
                    <mj-form-item label="显示loading">
                        <mj-switch v-model="loading"></mj-switch>
                    </mj-form-item>
                </mj-form>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData" v-loading="loading">
                            &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                        &lt;/mj-table>
                        &lt;mj-form label-width="100px" class="mt20">
                            &lt;mj-form-item label="显示loading">
                                &lt;mj-switch v-model="loading">&lt;/mj-switch>
                            &lt;/mj-form-item>
                        &lt;/mj-form>
                    &lt;/template>
                    &lt;script>
                    export default {
                        data() {
                            return {
                                tableData:......,
                                loading:false,
                            }
                        },
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="自定义列模板"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData">
                    <mj-column label="姓名" prop="name">
                       <template slot-scope="scope">
                            <span class="orange"><Icon type="user" />{{scope.row.name}}</span>
                        </template>
                    </mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="日期" prop="date"></mj-column>
                    <mj-column label="邮箱" prop="email"></mj-column>
                    <mj-column label="操作" width="160" align="center">
                        <template slot-scope="scope">
                            <!-- 查看行 -->
                            <mj-button type="primary" size="small" @click="view(scope)">查看</mj-button>
                        </template>
                    </mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData">
                            &lt;mj-column label="姓名" prop="name">
                               &lt;template slot-scope="scope">
                                    &lt;span class="orange">&lt;Icon type="user" />{scope.row.name}&lt;/span>
                                &lt;/template>
                            &lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                            &lt;mj-column label="操作" width="160" align="center">
                                &lt;template slot-scope="scope">
                                    &lt;mj-button type="primary" size="small" @click="view(scope)">查看&lt;/mj-button>
                                &lt;/template>
                            &lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    &lt;script>
                    export default {
                        data() {
                            return {
                                tableData:....
                            }
                        },
                        methods:{
                            view(scope) {
                                console.log(scope)
                                this.$alert(scope)
                            },        
                        }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="多级表头"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData" border ellipsis>
                    <mj-column label="日期" prop="date" width="200" fixed="left"></mj-column>
                    <mj-column label="配送信息">
                        <mj-column label="姓名" prop="name"></mj-column>
                        <mj-column label="邮箱" prop="email"></mj-column>
                        <mj-column label="地址" prop="address"></mj-column>
                    </mj-column>
                    <mj-column label="配送信息">
                        <mj-column label="姓名" prop="name"></mj-column>
                        <mj-column label="邮箱" prop="email"></mj-column>
                        <mj-column label="地址" prop="address"></mj-column>
                    </mj-column>
                    <mj-column label="邮箱" prop="email" width="200" fixed="right"></mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData" border ellipsis>
                            &lt;mj-column label="日期" prop="date" width="200" fixed="left">&lt;/mj-column>
                            &lt;mj-column label="配送信息">
                                &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                                &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                                &lt;mj-column label="地址" prop="address">&lt;/mj-column>
                            &lt;/mj-column>
                            &lt;mj-column label="配送信息">
                                &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                                &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                                &lt;mj-column label="地址" prop="address">&lt;/mj-column>
                            &lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email" width="200" fixed="right">&lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>        

        <mj-title type="h5" title="扩展列"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData">
                    <mj-column label="姓名" prop="name"></mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="日期" prop="date"></mj-column>
                    <mj-column label="邮箱" prop="email"></mj-column>
                    <mj-column label="操作" width="160" align="center">
                        <!-- 扩展列 -->
                        <template slot-scope="scope">
                            <mj-button size="small" type="primary" hollow @click="scope.extend()">{{scope.toggle?'收起':'展开'}}</mj-button>
                        </template>
                    </mj-column>
                    <!-- 扩展列 -->
                    <mj-column type="extend">
                        <template slot-scope="scope">
                            返回当前行所有信息：{{scope}}
                        </template>
                    </mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData">
                            &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                            &lt;mj-column label="操作" width="160" align="center">
                                &lt;!-- 扩展列 -->
                                &lt;template slot-scope="scope">
                                    &lt;mj-button size="small" type="primary" hollow @click="scope.extend()">{scope.toggle?'收起':'展开'}&lt;/mj-button>
                                &lt;/template>
                            &lt;/mj-column>
                            &lt;!-- 扩展列 -->
                            &lt;mj-column type="extend">
                                &lt;template slot-scope="scope">
                                    返回当前行所有信息：{scope}
                                &lt;/template>
                            &lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="二级Children数据"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData" hasChild>
                    <mj-column type="index" label="序号" width="60" align="center"></mj-column>
                	<mj-column label="姓名" prop="name"></mj-column>
                    <mj-column label="年龄" prop="age" minWidth="100" sortable></mj-column>
                    <mj-column label="日期" prop="date" minWidth="120" align="center" sortable></mj-column>
                	<mj-column label="邮箱" prop="email" minWidth="160" sortable></mj-column>
                    <mj-column label="操作" width="160" align="center">
                        <template slot-scope="scope">
                            <!--存在子节点信息时显示状态切换-->
                            <mj-button type="primary" hollow size="small" :icon="scope.toggle?'arrow-up':'arrow-down'" @click="scope.extend()" v-if="scope.row.children">{{scope.toggle?'收起':'展开'}}</mj-button>
                        </template>
                    </mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData" hasChild>
                            &lt;mj-column type="index" label="序号" width="60" align="center">&lt;/mj-column>
                            &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age" minWidth="100" sortable>&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date" minWidth="120" align="center" sortable>&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email" minWidth="160" sortable>&lt;/mj-column>
                            &lt;mj-column label="操作" width="160" align="center">
                                &lt;template slot-scope="scope">
                                    &lt;!--存在子节点信息时显示状态切换-->
                                    &lt;mj-button type="primary" hollow size="small" :icon="scope.toggle?'arrow-up':'arrow-down'" @click="scope.extend()" v-if="scope.row.children">{scope.toggle?'收起':'展开'}&lt;/mj-button>
                                &lt;/template>
                            &lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="尺寸"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData" size="large">
                    <mj-column label="姓名" prop="name"></mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="日期" prop="date"></mj-column>
                    <mj-column label="邮箱" prop="email"></mj-column>
                </mj-table>
                <br>
                <mj-table :data="tableData" size="small">
                    <mj-column label="姓名" prop="name"></mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="日期" prop="date"></mj-column>
                    <mj-column label="邮箱" prop="email"></mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData" size="large">
                            &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                        &lt;/mj-table>
                        &lt;br>
                        &lt;mj-table :data="tableData" size="small">
                            &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="Tr 行点击事件"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData" @row-click="rowClick">
                    <mj-column label="姓名" prop="name"></mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="日期" prop="date"></mj-column>
                    <mj-column label="邮箱" prop="email"></mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData" @row-click="rowClick">
                            &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    &lt;script>
                    export default {
                        data() {
                            return {
                                tableData:...
                            }
                        },
                        methods:{
                            rowClick(col,index) {
                                this.$alert(JSON.stringify(col,index),{
                                    width:1000
                                })
                            },     
                        }
                    }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="单元格Td 点击事件"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-table :data="tableData" @cell-click="cellClick">
                    <mj-column label="姓名" prop="name"></mj-column>
                    <mj-column label="年龄" prop="age"></mj-column>
                    <mj-column label="日期" prop="date"></mj-column>
                    <mj-column label="邮箱" prop="email"></mj-column>
                </mj-table>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-table :data="tableData" @cell-click="cellClick">
                            &lt;mj-column label="姓名" prop="name">&lt;/mj-column>
                            &lt;mj-column label="年龄" prop="age">&lt;/mj-column>
                            &lt;mj-column label="日期" prop="date">&lt;/mj-column>
                            &lt;mj-column label="邮箱" prop="email">&lt;/mj-column>
                        &lt;/mj-table>
                    &lt;/template>
                    &lt;script>
                    export default {
                        data() {
                            return {
                                tableData:...
                            }
                        },
                        methods:{
                            cellClick(col,index,column,cell) {
                                this.$alert(JSON.stringify(cell),{
                                    width:1000
                                })
                            },        
                        }
                    }
                    &lt;/script>                    
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Table 参数"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>data</td>
                    <td>显示的数据</td>
                    <td>array</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>border</td>
                    <td>是否显示表格纵向边框</td>
                    <td>Boolean</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>stripe</td>
                    <td>是否显示间隔斑马纹</td>
                    <td>Boolean</td>
                    <td>fasle</td>
                </tr>
                <tr>
                    <td>hover</td>
                    <td>鼠标悬停时高亮</td>
                    <td>Boolean</td>
                    <td>true</td>
                </tr>
                <tr>
                    <td>height</td>
                    <td>表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头</td>
                    <td>Number</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>loading</td>
                    <td>表格是否加载中</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>empty-text</td>
                    <td>数据为空时显示的提示内容</td>
                    <td>String</td>
                    <td>暂无数据</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>表格尺寸，可选值为 <code>large</code>、<code>small</code> 或者不填</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>ellipsis</td>
                    <td>表格单元格文字一行显示，宽度不够时显示……</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>showTooltip</td>
                    <td>ellipsis模式下，单元格hover时以tooltip 的形式显示全部</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>show-header</td>
                    <td>是否显示表头</td>
                    <td>Boolean</td>
                    <td>true</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Table Column 参数"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>prop</td>
                    <td>对应列内容的字段名</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>label</td>
                    <td>显示的标题</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>列宽</td>
                    <td>Number</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>minWidth</td>
                    <td>最小列宽</td>
                    <td>Number</td>
                    <td>60</td>
                </tr>
                <tr>
                    <td>align</td>
                    <td>对齐方式,left/center/right</td>
                    <td>String</td>
                    <td>left</td>
                </tr>
                <tr>
                    <td>fixed</td>
                    <td>列是否固定在左侧或者右侧，可选值为 <code>left</code> 左侧和 <code>right</code> 右侧。并且必须设置<code>width</code>，不要产生换行</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>对应列类型，可选 <code>selection</code>(多选)，<code>index</code> 序号(index从1开始)</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>sortable</td>
                    <td>对应列是否可以排序，如果设置为 <code>custom</code>，则代表用户希望远程排序，需要监听 Table 的 <code>sort-change</code> 事件</td>
                    <td>Boolean | 'custom'</td>
                    <td>false</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Table-column Scoped Slot"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>name</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>scope</td>
                    <td>自定义列的内容，参数为 { row, $index },<code>&lt;template slot-scope="scope">...&lt;/template></code></td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Table 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>sort-change</td>
                    <td>排序时有效，当点击排序时触发。column：当前列数据 prop：排序依据的指标 order：排序的顺序，值为 <code>asc</code> 或 <code>desc</code></td>
                    <td>{ column, prop, order }</td>
                </tr>
                <tr>
                    <td>row-click</td>
                    <td>当某一行被点击时会触发该事件。返回当前行数据，index</td>
                    <td>row,index</td>
                </tr>
                <tr>
                    <td>cell-click</td>
                    <td>当某个单元格被点击时会触发该事件。返回当前行数据，index，列，单元格内容</td>
                    <td>row,index,column,cell</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Table Methods"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>方法名</th>
                    <th>说明</th>
                    <th>参数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>clearSort</td>
                    <td>恢复初始排序由服务端控制，本地清除排序状态</td>
                    <td>无</td>
                </tr>
                <tr>
                    <td>toggleSelection</td>
                    <td>用于多选表格，选中所有行或取消所有选择</td>
                    <td>true / false</td>
                </tr>
                <tr>
                    <td>toggleRowSelection</td>
                    <td>用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）</td>
                    <td>row, selected</td>
                </tr>
                <tr>
                    <td>getSelectAll</td>
                    <td>获取多选表格已选中项数据</td>
                    <td>无</td>
                </tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Table Data 数据格式"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>trClass</td>
                    <td>tr 行自定义class名称</td>
                </tr>
                <tr>
                    <td>children</td>
                    <td>二级数据</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Checkbox 复选框禁用，在勾选时会忽略此数据</td>
                </tr>
            </tbody>
        </table>

	</div>
</template>

<script>
export default {
	data() {
		return {
            tableData: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-10-03',
                    email:'ken@gmail.com',
                    trClass: 'trClass' /* 特殊参数为当前tr添加指定样式 */
                },
                {
                    name: 'John Smith',
                    age: 24,
                    address: 'London No. 1 Lake Park',
                    date: '2022-10-01',
                    email:'Danny@info.com',
                    disabled:true,//禁用
                    children:[
                        {
                            name:'子节点1',
                            age: 38,
                            address: 'children',
                            date: '2016-10-01',
                            email:'Gladys@info.com',
                            trClass:'trClass'
                        },
                        {
                            name:'子节点2',
                            age: 38,
                            address: 'children',
                            date: '2016-10-01',
                            email:'sarah@gmail.com',
                            trClass:'trClass'
                        }
                    ]
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    date: '2019-12-02',
                    email:'test@example.com',
                },
                {
                    name: 'Ken Smith',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    date: '2021-10-04',
                    email:'Gerald@gmail.com',
                },
                {
                    name: 'Gerald K Smith',
                    age: 58,
                    address: 'New York No. 1 Lake Park',
                    date: '2016-05-11',
                    email:'Patricia@gmail.com',
                    children:[
                        {
                            name:'子节点3',
                            age: 25,
                            address: 'children',
                            date: '2016-10-01',
                            email:'Gladys@info.com',
                            trClass:'trClass'
                        },
                        {
                            name:'子节点4',
                            age: 25,
                            address: 'children',
                            date: '2016-10-01',
                            email:'sarah@gmail.com',
                            trClass:'trClass'
                        }
                    ]
                },
                {
                    name: 'Ken Smith',
                    age: 29,
                    address: 'London No. 1 Lake Park',
                    date: '2018-10-01',
                    email:'Gladys@gmail.com',
                },
                {
                    name: 'Alice A Smith',
                    age: 16,
                    address: 'Sydney No. 1 Lake Park',
                    date: '2019-10-02',
                    email:'ken@gmail.com',
                },
                {
                    name: 'Corrine M Johnson',
                    age: 27,
                    address: 'Ottawa No. 2 Lake Park',
                    date: '2021-01-04',
                    email:'Corrine@gmail.com',
                }
            ],
            loading1:false,
            loading:false,
            setting:{
                hover:true,
                border:false,
                stripe:false,
                showHeader:true,
            },
            tableData4: []
        }
    },
    created() {
        setTimeout(()=>{
            this.tableData4 = this.tableData
        },4000)
    },
    methods: {
        view(scope) {
            console.log(scope)
            this.$alert(scope)
        },
        getSelectAll() {
            this.$alert(JSON.stringify(this.$refs.getSelectAll.getSelectAll()))
            console.log("getSelectAll");
            console.log(this.$refs.getSelectAll.getSelectAll());
        },
        toggleSelection(boolean) {
            this.$refs.getSelectAll.toggleSelection(boolean);
        },
        toggleRowSelection(bool) {
            const row = [2,3];
            row.forEach(row => {
                this.$refs.getSelectAll.toggleRowSelection(row, bool);
            });
        },
        sortChange(column, prop, order) {
            console.log('%c排序','color:yellow',column, prop, order)
        },
        rowClick(col,index) {
            console.log(col,index)
            this.$alert(JSON.stringify(col,index),{
                width:1000
            })
        },
        cellClick(col,index,column,cell) {
            console.log(col,index,column,cell)
            this.$alert(JSON.stringify(cell),{
                width:1000
            })
        },
        updata() {
            const _this = this
            this.loading1 = true
            setTimeout(()=>{
                _this.loading1 = false
                _this.tableData = [
                    {
                        name: '曹操',
                        age: 48,
                        address: '沛国谯',
                        date: '155年7月18日－220年3月15日',
                        email:'魏国皇宫',
                    },
                    {
                        name: '刘备',
                        age: 52,
                        address: '涿郡涿县',
                        date: '161—223',
                        email:'野帐营',
                        children:[
                            {
                                name:'关羽',
                                age: 38,
                                address: '河东解良人',
                                date: '162?-220',
                                email:'野帐营',
                            },{
                                name:'张飞',
                                age: 37,
                                address: '东汉涿郡涿县桃庄',
                                date: '?~221',
                                email:'野帐营',
                            },
                            {
                                name:'姜维',
                                age: 38,
                                address: '天水冀县',
                                date: '202－264年',
                                email:'野帐营',
                            }
                        ]
                    },
                    {
                        name: '诸葛亮',
                        age: 52,
                        address: '琅琊阳都',
                        date: '181年7月23日',
                        email:'茅庐',
                    },
                    {
                        name: '华佗',
                        age: 58,
                        address: '沛国谯县人',
                        date: '约公元145年－公元208年',
                        email:'野外',
                    },
                    {
                        name: '马超',
                        age: 29,
                        address: '茂陵人氏',
                        date: '大约在汉灵帝末年（180~189）',
                        email:'金城兰州',
                    },
                ] 
            },1000)
        },
        cleardata() {
            const _this = this
            this.loading1 = true
            setTimeout(()=>{
                _this.loading1 = false
                this.tableData = []
            },1000)
        },
        addData() {
            this.tableData.push({
                    name: '新增行',
                    age:'-',
                    address: '-',
                    date: '-',
                    email:'-',
                })
        },
        clearSort() {
            this.$refs.tableSort.clearSort()
        }
    }
}
</script>

<style scoped>
.tools .mj-btn {margin:3px;}
</style>